{# @author : Brett , Antonin#}

{% extends "::layout.html.twig" %}

{% block title %}
Facebook - {{ parent() }}
{% endblock %}

{% block style %}
<style type="text/css">
  /* custom template */
  html, body {
  height: 100%;
  font-family:verdana,arial,sans-serif;
  color:#555555;
  }

  .nav {
  font-family:Arial,sans-serif;
  font-size:13px;
  }

  hr {
  border-color:#dedede;
  }

  .wrapper, .row {
  height: 100%;
  margin-left:0;
  margin-right:0;
  }

  .wrapper:before, .wrapper:after,
  .column:before, .column:after {
  content: "";
  display: table;
  }

  .wrapper:after,
  .column:after {
  clear: both;
  }

  .column {
  height: 100%;
  overflow: auto;
  *zoom:1;
  }

  .column .padding {
  padding: 20px;
  }

  .full{
  padding-top:70px;
  }

  .box {
  bottom: 0; /* increase for footer use */
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-color:#444444;
  }

  .divider {
  margin-top:32px;
  }
  /*
  .navbar-blue {
  border-width:0;
  background-color:#3B5999;
  color:#ffffff;
  font-family:arial,sans-serif;
  top:0;
  position:fixed;
  width:inherit;
  }

  .navbar-blue li > a,.navbar-toggle  {
  color:#efefef;
  }

  .navbar-blue .dropdown-menu li a {color:#2A4888;}
  .navbar-blue .dropdown-menu li > a {padding-left:30px;}

  .navbar-blue li>a:hover, .navbar-blue li>a:focus, .navbar-blue .open, .navbar-blue .open>a, .navbar-blue .open>a:hover, .navbar-blue .open>a:focus {
  background-color:#2A4888;
  color:#fff;
  }
  */

  #main {
  background-color:#e9eaed;
  padding-left:0;
  padding-right:0;
  }
  #main .img-circle {
  margin-top:18px;
  height:70px;
  width:70px;
  }

  #sidebar {
  padding:0px;
  padding-top:15px;
  }

  #sidebar, #sidebar a, #sidebar-footer a {
  color:#ffffff;
  background-color:transparent;
  text-shadow:0 0 2px #000000;
  padding-left:5px;
  }
  #sidebar .nav li>a:hover {
  background-color:#393939;
  }

  .logo {
  display:block;
  padding:3px;
  background-color:#fff;
  color:#3B5999;
  height:28px;
  width:28px;
  margin:9px;
  margin-right:2px;
  margin-left:15px;
  font-size:20px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  text-shadow:0 0 1px;
  border-radius:2px;
  }
  #sidebar-footer {
  background-color:#444;
  position:absolute;
  bottom:5px;
  padding:5px;
  }
  #footer {
  margin-bottom:20px;
  }

  /* bootstrap overrides */

  h1,h2,h3 {
  font-weight:800;
  }

  .navbar-toggle, .close {
  outline:0;
  }

  .navbar-toggle .icon-bar {
  background-color: #fff;
  }

  .btn-primary,.label-primary,.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus  {
  background-color:#3B5999;
  color:#fffffe;
  }
  .btn-default {
  color:#666666;
  text-shadow:0 0 1px rgba(0,0,0,.3);
  }
  .form-control {
  
  }

  .panel textarea, .well textarea, textarea.form-control
  {
  resize: none;
  }
  
  .badge{
  color:#3B5999;
  background-color:#fff;
  }
  .badge:hover, .badge-inverse{
  background-color:#3B5999;
  color:#fff;
  }
  
  .jumbotron {
  background-color:transparent;
  }
  .label-default {
  background-color:#dddddd;
  }
  .page-header {
  margin-top: 55px;
  padding-top: 9px;
  border-top:1px solid #eeeeee;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
  }

  .panel-default .panel-heading {
  background-color:#f9fafb;
  color:#555555;
  }

  .col-sm-9.full {
  width: 100%;
  }

  .modal-header, .modal-footer {
  background-color:#f2f2f2;
  font-weight:800;
  font-size:12px;
  }

  .modal-footer i, .well i {
  font-size:20px;
  color:#c0c0c0;
  }

  .modal-body {
  padding:0px;
  }

  .modal-body textarea.form-control
  {
  resize: none;
  border:0;
  box-shadow:0 0 0;
  }

  small.text-muted {
  font-family:courier,courier-new,monospace;
  }

  /* adjust the contents on smaller devices */
  @media (max-width: 768px) {

  .column .padding {
  padding: 7px;
  }

  .full{
  padding-top:20px;
  }

  .navbar-blue {
  background-color:#3B5999;
  top:0;
  width:100%;
  position:relative;
  }

  }


  /*
  * off canvas sidebar
  * --------------------------------------------------
  */
  @media screen and (max-width: 768px) {
  .row-offcanvas {
  position: relative;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  }

  .row-offcanvas-left.active {
  left: 33%;
  }

  .row-offcanvas-left.active .sidebar-offcanvas {
  left: -33%;
  position: absolute;
  top: 0;
  width: 33%;
  margin-left: 5px;
  }

  #sidebar, #sidebar a, #sidebar-footer a {
  padding-left:3px;
  }
  }
</style>
{% endblock %}

{% block body %}

<div class="col-sm-7">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="text-center">S'inviter au groupe</h3>
    </div>
    <div class="panel-body">
      {% if uid != 0 %}
   <a href="{{ path('site_facebook_display_joindregroup',{ 'uId': uid , 'groupId': groupId } ) }}"> <button type="button" class="btn btn-info">Joindre Groupe</button></a>
    {% else %}
    <a href="{{ url }}"> <button type="button" class="btn btn-warning">Login FB</button></a>
     {% endif %}
    <a href="https://www.facebook.com/groups/{{ groupId }}"><button type="button" class="btn btn-default">Page du Groupe</button></a>
    </div>
  </div>

{% for message in grpfb %}
  <div class="panel panel-default">
    <div class="panel-heading">
      <img src="{{ message.url }}" height="70px" width="70px">
      <h3 > {{ message.name }} </h3>
      <h6> Posté le {{ message.date }}</h6>
    </div>
    <div class="panel-body">
      <div class="clearfix">
	<h4>{{ message.message }}
	  <br/>
	</h4>
      </div>
      <hr>
      
      {% for comment in message.comments %}
      <div class="well">
	<img src="{{ comment.url }}" height="70px" width="70px"> {{ comment.name }} <br />
	Posté le {{ comment.date }}
	<hr />
      <p>{{ comment.message }}
	<br />
      </p>
      </div>
      {% endfor %} 
    </div>
  </div>
  {% endfor %}
</div>


<div class="col-sm-5">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4>Derniers documents postés</h4></div>
    <div class="panel-body">
      <div class="list-group">
        {% for file in files.data %}
	<a href="{{ file.download_link }}" class="list-group-item">- {{ file.message }} </a>
	{% endfor %}
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4>Liens importants</h4>
    </div>
    <div class="panel-body">
      <div class="list-group">
	{% for link in links %}
	<a href="{{ link }}" class="list-group-item">{{ link }}</a>
	{% endfor %}
      </div>
    </div>
  </div>

   <div class="panel panel-default">
    <div class="panel-heading">
      <h4>HotLine Meynard</h4>
    </div>
    <div class="panel-body">
      {% for send in hotline %}
      <div class="panel panel-default">
	<div class="panel-body">
	  {{ send.message }}
	</div>
      </div>
      {% endfor %}
    </div>
   </div>
   
</div>
{% endblock %}
